<template>
    <h3>当前位置：{{ TITLE.equipment }}</h3>
    <div class="outbox">
        <bListSearch :instance="mSearch">
            <ElButton @click="() => mSearch.onSearch()" type="primary">搜索</ElButton>
        </bListSearch>
        <div :style="{ height: `calc(${height} + 30px)`, display: 'flex' }">
            <div id="box31">
                <h4>设备共享数量统计</h4>
            </div>
            <div :style="{ width: rightWidth }">
                <h4>累计预约人次</h4>
                <div class="right-top" :style="{ width: rightWidth, height }">
                    <ElImage :src="src"></ElImage>
                    <div class="text">{{ total }}人</div>
                </div>
            </div>
        </div>
        <div :style="{ height, width }">
            <h4>设备共享详情</h4>
            <div class="blank"></div>
            <bTable :label="pList.labels" :table-data="pList.list" :total="pList.total" :is-h="[]" :stripe="true"
                :border="false" :limit="pList.limit" @currentchange="onCurrentchange">
            </bTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { EDP } from '@b/model/enum';
import { TITLE } from "@b/model/enum";
import { onMounted, ref } from 'vue';
import bListSearch from "@/components/public/b_list_search.vue";
import { ElButton, ElImage } from "element-plus";
import { BoxEq } from "@/components/sub_charts/box31_line";
import bTable from "@/components/public/b_table.vue";
import { Equipment, ReferralSearch } from "@b/index/referral";
import { reactive } from "vue";
import src from "../assets/h1.png";
import { Http } from '@b/model/base/http';

const pList = reactive(new Equipment())
const mSearch = reactive(new ReferralSearch(2))
const total = ref(0)
const height = ref(EDP.HEIGHT / 2 - 200 + 'px')
const width = ref(EDP.WIDTH + 'px')
const leftWidth = ref(EDP.WIDTH * 0.6 + 'px')
const rightWidth = ref(EDP.WIDTH * 0.4 + 'px')
const eq = new BoxEq(leftWidth.value, height.value)

mSearch.onSearch = async () => {
    pList.search_key = mSearch.getData()
    await pList.refresh(1);
    eq.setData(pList.chartsData)
}
onMounted(async () => {
    total.value = await new Http().request('/v1/bigscreen/GetSharedDevicePersonCount', { method: 'GET' })
    eq.init()
    mSearch.onSearch()
})
const onCurrentchange = (page: number) => {
    pList.refresh(page)
}
</script>
<style scoped>
.outbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#box31 {
    width: v-bind(leftWidth);
}

.right-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-top .text {
    margin: 20px 0;
    color: #aaa;
    font-size: 3em;
}
</style>